JMCP: Papers - jmcp/render-an-empty-state-when-no-listings-m-ZKpA5_jp#39
Closed
JMCP: Papers - jmcp/render-an-empty-state-when-no-listings-m-ZKpA5_jp#39
Conversation
Owner
Author
|
Closing: will integrate valuable features directly on main to avoid cascade merge conflicts. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Now I have a complete picture. Here's the review:
Review: Render empty state when no listings match
Change summary
Adds
<p className="muted-copy">…</p>empty-state messages to 8 pages across the app. Each listing section (feed, trending, conferences, opportunities, submissions, digest, profile papers, profile opportunities) now renders a contextual hint when the array is empty. The feed page additionally distinguishes search-miss ("No papers match your search") from zero-state ("No papers in the feed yet").Pages touched:
page.tsx(home),feed/page.tsx,conferences/page.tsx,conferences/[conferenceId]/page.tsx,digest/page.tsx,opportunities/page.tsx,u/[handle]/page.tsx.Pattern used:
{items.length === 0 && <p className="muted-copy">…</p>}placed after the.feed-stackdiv.Validation confidence: Medium-High
feed/page.tsx(params.q ? … : …) is a nice touch.Risks that still remain
muted-copyclass has no CSS definition.muted-copyrule exists inglobals.cssor any stylesheet. The text will render unstyled (default<p>). Either define.muted-copyor use an existing class (e.g.,field-note)..feed-stackdiv is always rendered even when the list is empty — harmless but adds an empty container to the DOM. Could wrap it initems.length > 0 &&for cleanliness, but not required.feed/page.tsxgroups section skippedgroups.length > 0 &&around the wholeSectionCard, so no empty state is shown for groups. Intentional? If a user has left all groups they see nothing — no prompt to join one.groups/page.tsxorgroups/[groupSlug]/page.tsxnpm run test && npm run checkmust pass after every change. Should verify before committing.Verdict
The main blocker is the missing
.muted-copyCSS class — without it the empty states render as unstyled paragraphs. Define the class or switch to an existing one, then runnpm run test && npm run checkand this is ready to ship.